<template>
  <!-- 水量统计 -->
  <!-- 折线图 -->
  <div class="theAmountOfWaterStatistics">
    <div id="chartLineBox" class="chartLineBox-main"></div>
    <span class="wanfang">(万方)</span>
  </div>
</template>

<script>
const echarts = require('echarts')
import { waterCountStatistics } from '@/api/revenueHome/index'
export default {
  data() {
    return {
      echarts: '',
      waterVolume: [],
    }
  },
  beforeDestroy() {
    window.removeEventListener('resize', () => {
      this.echarts.resize()
    })
  },
  methods: {
    changeHeightWidth(i, x, y, height, width) {
      console.log('height, width', height, width)
      let chartLineBox = document.getElementById('chartLineBox')
      chartLineBox.style.height = height - 5 + 'px'
      chartLineBox.style.width = width - 15 + 'px'
      this.echarts = this.$echarts.init(chartLineBox)
      this.echarts.resize()
    },
    createEcharts() {
      // 基于准备好的dom，初始化echarts实例
      this.echarts = echarts.init(document.getElementById('chartLineBox'))
      var option = {
        toolbox: {
          show: false,
          feature: {
            saveAsImage: {
              show: false,
            },
          },
        },
        grid: {
          left: '2%',
          // bottom: '40%',
          right: '2%',
        },
        // 提示框
        tooltip: {
          show: true,
          color: '#828282',
          trigger: 'item',
          position: 'right',
        },
        legend: {
          data: ['月份和水量'],
          left: '50%',
          top: '10px',
        },
        xAxis: [
          {
            axisTick: {
              show: true,
            },
            data: [
              '1月',
              '2月',
              '3月',
              '4月',
              '5月',
              '6月',
              '7月',
              '8月',
              '9月',
              '10月',
              '11月',
              '12月',
            ],
          },
        ],
        yAxis: [
          {
            type: 'value',
            axisLabel: {},

            spliNumber: 5,
            // 刻度是否显示
            axisTick: {
              show: false,
            },
          },
        ],
        series: [
          {
            data: [],
            type: 'line',
            areaStyle: {
              normal: {},
            },
            symbolSize: 8, //折线上圆点大小
            itemStyle: {
              normal: {
                // 拐点上显示数值
                label: {
                  show: true,
                },
                color: '#0B9AC3',
                borderColor: '#00BFFF', //拐点边框颜色 00BFFF
                lineStyle: {
                  width: 2, //设置线宽
                  color: '#00BFFF',
                },
              },
            },
          },
        ],
      }
      // 使用刚指定的配置项和数据显示图表。
      this.echarts.setOption(option)
      window.addEventListener('resize', () => {
        this.echarts.resize()
      })
    },
    // 获取折线图水量
    async getWaterCountStatistics(call) {
      const res = await waterCountStatistics()
      console.log(res, '请求数据')
      let waterVolume = []
      this.waterVolume = res.data
      // let receiptsList = []
      let resObj = res.data
      resObj.map(Number)
      // for (var i = 0; i < resObj.length; i++) {
      //      resObj[i] = resObj[i] / 10000;
      // }
      // console.log(resObj, '测试打印一下');
      this.echarts.setOption({})
      this.echarts.setOption({
        tooltip: {},
        toolbox: {
          feature: {},
        },
        legend: {
          data: ['月份和水量'],
        },
        xAxis: [
          {
            axisTick: {
              show: true,
            },
            data: [
              '1月',
              '2月',
              '3月',
              '4月',
              '5月',
              '6月',
              '7月',
              '8月',
              '9月',
              '10月',
              '11月',
              '12月',
            ],
          },
        ],
        yAxis: [
          {
            type: 'value',
            axisLabel: {
              // formatter: '{value}'
              formatter: function (value, index) {
                // if (value >= 10000 && value < 10000000) {
                //     value = value / 10000 + "万";
                // } else if (value >= 10000000) {
                //     value = value / 10000000 + "千万";
                // }
                // value = value / 10000
                if (value >= 10000 && value < 10000000) {
                  value = value / 10000
                } else if (value >= 10000000) {
                  value = value / 10000000
                }
                return value
                return value
              },
            },
            // min: 0,
            // max: 100,
            spliNumber: 5,
            // 刻度是否显示
            axisTick: {
              show: false,
            },
          },
        ],
        series: [
          {
            // name: '应收',
            type: 'line',
            // symbol:'circle',//拐点设置为实心
            itemStyle: {
              normal: {
                color: '#0B9AC3',
              },
            },
            data: this.waterVolume,
            areaStyle: {
              normal: {},
            },
            symbolSize: 8, //折线上圆点大小
            itemStyle: {
              normal: {
                // 拐点上显示数值
                label: {
                  show: false,
                },
                color: '#D9EFF4', // D9EFF4
                borderColor: '#0B9AC3', //拐点边框颜色
                lineStyle: {
                  width: 2, //设置线宽
                  color: '#0B9AC3',
                },
              },
            },
          },
        ],
      })
      call && call()
    },
  },
  mounted() {
    this.createEcharts()
    this.getWaterCountStatistics(() => {
      let width = document.querySelector('.theAmountOfWaterStatistics')
        .parentNode.parentNode.parentNode.style.width
      let height = document.querySelector('.theAmountOfWaterStatistics')
        .parentNode.parentNode.parentNode.clientHeight
      console.info('width--', width.split('p')[0])
      this.changeHeightWidth(0, 0, 0, height, Number(width.split('p')[0]))
    })
  },
}
</script>
<style lang="scss">
.chartLineBox-main {
  width: 320px;
  height: 220px;
}
.wanfang {
  position: absolute;
  top: 50px;
  right: 55px;
  font-size: 14px;
}
</style>
